<template>
	<div class="display flow PaginationAre">
		<el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page.sync="currentPage"
			:page-sizes="[10, 50, 100, 500]"
			:page-size="pageSize"
			layout="total,sizes, prev, pager, next"
			:total="total">
		</el-pagination>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				currentPage:1,
				pageSize:10
			}
		},
		props:['total'],
		mounted(){

		},
		methods:{
			handleSizeChange(val) {
				// console.log(`每页 ${val} 条`);
				this.pageSize = val
				this.$emit('sizeChange',val);
			},
			handleCurrentChange(val) {
				// console.log(`当前页: ${val}`);
				this.currentPage = val;
				this.$emit('currentPage',val)
			}
		}
	}
</script>

<style>
	.PaginationAre{
		width: 100%;
		justify-content: flex-end;
		margin-top: 20px;
	}
</style>
